<template>
  <xh-container
    :title="formData.userId ? '编辑' : '新增'"
    btnText="保存"
    @onSave="handleClickSubmit"
  >
    <view class="form-wrapper">
      <uni-forms
        :rules="rules"
        ref="form"
        :modelValue="formData"
        :label-width="80"
        label-align="right"
      >
        <uni-forms-item label="用户昵称" name="nickName">
          <uni-easyinput
            v-model="formData.nickName"
            placeholder="请输入用户昵称"
          />
        </uni-forms-item>
        <uni-forms-item label="用户名称" name="userName">
          <uni-easyinput
            v-model="formData.userName"
            placeholder="请输入用户名称"
          />
        </uni-forms-item>
        <uni-forms-item
          label="用户密码"
          name="password"
          v-if="!formData.userId"
        >
          <uni-easyinput v-model="formData.password" placeholder="请输入密码" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phonenumber">
          <uni-easyinput
            v-model="formData.phonenumber"
            placeholder="请输入手机号码"
          />
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput v-model="formData.email" placeholder="请输入邮箱" />
        </uni-forms-item>

        <uni-forms-item label="状态" name="status">
          <view class="center-wrapper">
            <uni-data-checkbox
              v-model="formData.status"
              :localdata="statusOptions"
            ></uni-data-checkbox>
          </view>
        </uni-forms-item>
        <uni-forms-item label="部门" name="deptId">
          <xh-tree-select
            v-model="formData.deptId"
            placeholder="请选择部门"
            :listData="deptList"
            showChildren
            dataLabel="label"
          />
        </uni-forms-item>
        <uni-forms-item label="岗位" name="postIds">
          <xh-multiple-select
            v-model="formData.postIds"
            placeholder="请选择岗位"
            :localdata="postList"
            :map="{ text: 'postName', value: 'postId' }"
          />
        </uni-forms-item>
        <uni-forms-item label="角色" name="roleIds">
          <xh-multiple-select
            v-model="formData.roleIds"
            placeholder="请选择角色"
            :localdata="roleList"
            :map="{ text: 'roleName', value: 'roleId' }"
          />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex">
          <view class="center-wrapper">
            <uni-data-checkbox
              v-model="formData.sex"
              :localdata="sexOptions"
            ></uni-data-checkbox>
          </view>
        </uni-forms-item>
        <uni-forms-item label="备注" name="remark">
          <uni-easyinput v-model="formData.remark" placeholder="请输入备注" />
        </uni-forms-item>

        <!-- <uni-forms-item
					label="归属部门"
					name="deptId"
				>
					<uni-data-picker
						v-model="formData.deptId"
						:map="{ text: 'label', value: 'id' }"
						:localdata="deptList"
						popup-title="请选择部门"
					></uni-data-picker>
				</uni-forms-item> -->
      </uni-forms>
    </view>
  </xh-container>
</template>
<script>
import {
  getDeptTree,
  addUser,
  editUser,
  getPostAndRole,
} from "@/api/system/user.js";
import { decodeParams } from "@/utils/common.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      formData: { status: "0", sex: "1" },
      deptList: [],
      sexOptions: [
        { text: "男", value: "1" },
        { text: "女", value: "2" },
        { text: "其他", value: "3" },
      ],
      postList: [],
      roleList: [],
      rules: {
        nickName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入用户昵称",
            },
          ],
        },
        userName: {
          rules: [
            {
              required: true,
              errorMessage: "请输入用户名称",
            },
          ],
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: "请输入用户密码",
            },
          ],
        },
      },
    };
  },
  onLoad(options) {
    const params = decodeParams(options);
    if (params.userId) {
      this.formData = params;
      this.formData.deptId = params.deptId ? [Number(params.deptId)] : [];
    }
  },
  computed: {
    ...mapGetters(["statusOptions"]),
  },
  created() {
    this.fetchDept();
  },
  mounted() {
    this.fetchPostAndRole();
  },
  methods: {
    handleClickSubmit() {
      const handleSuccess = () => {
        this.$modal.msgSuccess("保存成功！");
        this.clearData();
        this.$nav.navigateBack();
      };
      this.$refs.form.validate().then((values) => {
        const { userId, deptId, ...rest } = this.formData;
        const params = {
          ...rest,
          deptId: deptId ? deptId[0] : undefined,
        };
        if (userId) {
          editUser({
            ...params,
            userId,
          }).then(() => {
            handleSuccess();
          });
        } else {
          addUser(params).then(() => {
            handleSuccess();
          });
        }
      });
    },
    fetchDept() {
      getDeptTree().then((res) => {
        console.log("res", res);
        this.deptList = res.data;
      });
    },
    clearData() {
      this.formData = {};
      this.$refs.form.clearValidate();
    },
    fetchPostAndRole() {
      getPostAndRole(this.formData.userId || "").then((res) => {
        const { posts, roles, postIds, roleIds } = res;
        this.postList = posts;
        this.roleList = roles;
        this.formData.postIds = postIds;
        this.formData.roleIds = roleIds;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.form-wrapper {
  padding: 10px;
  .center-wrapper {
    display: flex;
    height: 36px;
    align-items: center;
  }
}
</style>
